<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" http-equiv="refresh" content="5">
    <title>这里练习h5 action-2</title>
    <base href="http://www.baidu.com" target="_blank"><!--这里设置了所有连接打开的默认连接 -->
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"><!--这里定义了与外部文件的关联-->
    <style>
        p.pos_fixed{
            position: fixed;
            top:30px;
        }
        h2.pos_rel{
            position: relative;
            left: -20px;
            top:-30px;
        }
        .hor_center{
            margin: auto;
            width: 70%;
            background-color: #2aabd2;
        }

        .nav-list{
            list-style-type: none;
            margin: 0 10px;
            float: left;
        }

        .dropdown{
            position: relative;
            display: inline-block;
        }
        .dropdown-content{
            display: none;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,2);
            min-width: 160px;
            position: absolute;
            background-color: #2aabd2;
            padding: 12px 16px;
            margin-top: 0px;
        }
        .dropdown:hover .dropdown-content{
            display: block;
        }

        .dropup{
            display: inline-block;
            position: relative;
        }
        .dropup:hover .dropcontent{
            display: block;
        }
        .dropbtn{
            background-color: green;
            color: white;
            height: 50px;
            width: 80px;
            border: none;
        }
        .dropbtn:hover{
            background-color: #2b542c;
        }
        .dropcontent{
            display: none;
            background-color: #9d9d9d;
            position: absolute;
            min-width:160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        }
        .dropcontent a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }
        .dropcontent a:hover{
            background-color: #f1f1f1;
        }
    </style>
</head>
<body onselectstart="return false">
<a href="http://www.baidu.com" target="_top">点击这里 打开百度</a><br>
<a href="#">这个是闹着玩的</a><br>

<!--css position-->
<p class="pos_fixed">Some more text</p>
<h2 class="pos_rel">This is a heading with no position</h2>
<div class="hor_center">
    <p>居中对齐</p>
    <p>N<sub>2</sub>O</p>
</div>

<!--表格-->
<table border="1">
    <caption>这里是表格标题</caption>
    <colgroup>
        <col span="2" style="background-color: red">
        <col style="background-color: #5cb85c">
    </colgroup>
    <thead>
        <tr>
            <td>one piece</td>
            <td>two piece</td>
            <td>three piece</td>
        </tr>
    </thead>
    <tr>
        <th>这是表格标题1</th>
        <th>这是表格标题2</th>
        <th>这是表格标题3</th>
    </tr>
    <tr>
        <td>cell1</td>
        <td>cell2</td>
        <td>cell3</td>
    </tr>
    <tfoot>
        <tr>
            <td>one piece foot</td>
            <td>two piece foot</td>
            <td>three piece foot</td>
        </tr>
    </tfoot>
</table>

<!--无序列表-->
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>

<!--有序列表-->
<ol>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ol>

<!--定义定义列表-->
<dl>
    <dt>摩卡</dt>
    <dd>是一种咖啡</dd>
    <dt>mac</dt>
    <dd>是电脑啊</dd>
</dl>

<!--布局-->
<div style="width: 500px">
    <div style="background-color: #9acfea">
        <h3 style="margin-bottom: 0px">This is title</h3>
    </div>
    <div style="width: 100px;height: 200px; background-color: #5cb85c;float: left">
        <b>Menu</b><br>
        <em>HTML</em><br>
        <small>CSS</small><br>
        JS
    </div>
    <div style="width: 400px;height: 200px;background-color: #9d9d9d;float: left;">
        Content is here
    </div>
    <div style="background-color:#9acfea;text-align: center">
        <abbr title="这里是说明么">Copyright © W3Cschools.com</abbr>
    </div>
</div>

<br>

<!--使用表格布局-->
<table width="500px">
    <tr style="background-color: #9acfea">
        <td colspan="2">
            <h3>This is title</h3>
        </td>
    </tr>

    <tr>
        <td style="background-color: #5cb85c">
            <b>Menu</b><br>
            HTML<br>
            CSS<br>
            JS
        </td>
        <td style="background-color: #9d9d9d">
            Content is here
        </td>
    </tr>

    <tr>
       <td style="background-color: #9acfea;text-align: center" colspan="2">
           <abbr title="这里是说明么">Copyright © W3Cschools.com</abbr>
       </td>
    </tr>
</table>

<br>
<!--表单-->
<textarea cols="30" rows="10" placeholder="随便写写" maxlength="5"></textarea>
<form action="/statics/demosource/demo-form.php" id="form">
    <label for="male" >Male</label>
    <input type="radio" id="male"><br>
    <fieldset>
        <legend>个人信息:</legend>
        姓名:<input type="text"><br>
        邮箱:<input type="text"><br>
    </fieldset>
    <p>
        <select multiple="true" autofocus>
        <option value="111">111</option>
        <option value="222">222</option>
        <option value="333">333</option>
    </select>
    </p>
</form>
<button onclick="createSelect()">点我创建select</button>
<button onclick="addOption()">点我添加选项</button>
<button onclick="removeAll()">点我删除所有选项</button>
<button onclick="removeOne()">点我删除选中项</button>
<button id="button1" onclick="clickValue()">点我变成选中值</button>
<button onclick="updateVlue()">点我改变选中值</button>
<button onclick="removeSelect()">点我删除select</button><br>
<input type="text" list="list">
<datalist id="list">
    <optgroup label="第一部分">
        <option>1111</option>
        <option>2222</option>
    </optgroup>
    <optgroup label="第二部分">
        <option>33333</option>
        <option>44444</option>
    </optgroup>
</datalist>

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
    <input type="range" id="a" value="50" >100+<input type="number" id="b" value="50">=<output name="x" for="a b"></output>
</form>

<iframe src="/statics/demosource/demo_iframe.htm" width="200" height="200" frameborder="0" name="iframe_a"></iframe>
<p><a href="http://www.baidu.com" target="iframe_a">点我打开百度</a></p>
<p>a&#768;&nbsp;a&#769;a&#770;a&#771;&lt;&gt;&amp;&quot;&cent;&pound;&yen;&times;&divide;</p>
<object width="400" height="50" data="index.html"></object>
<script>
    var count = 0;
    function createSelect() {
        var s = document.createElement("select")
        s.id = "myselect"
        document.body.appendChild(s)
    }
    function addOption() {
        var s = document.getElementById("myselect")
        s.add(new Option(count++,"值"))
    }
    function removeAll() {
        var s = document.getElementById("myselect")
        s.options.length = 0
    }
    function removeOne() {
        var s = document.getElementById("myselect")
        var index = s.selectedIndex
        s.options.remove(index)
    }
    function clickValue() {
        var s = document.getElementById("myselect")
        var index = s.selectedIndex

        alert(s.options[index].text)

    }
    function updateVlue() {
        var s = document.getElementById("myselect")
        var index = s.selectedIndex
        var val = s.options[index] = new Option("新文本","新值")
    }
    function removeSelect() {
        var s = document.getElementById("myselect")
        s.parentNode.removeChild(s)
    }
</script>

<!-- 导航栏 -->
<ul>
    <li class="nav-list">首页</li>
    <li class="nav-list">发现</li>
    <li class="nav-list">购物车</li>
    <li class="nav-list">我的</li>
</ul>

<!-- 下拉菜单 -->
<br>
<div class="dropdown">
    <span>下拉</span>
    <ul class="dropdown-content">
        <li>首页</li>
        <li>发现</li>
    </ul>
</div>

<div class="dropup">
    <button class="dropbtn">菜单</button>
    <div class="dropcontent">
        <a>iOS</a>
        <a>Android</a>
        <a>Swift</a>
    </div>
</div>


<div style="height: 300px"></div>
</body>
</html>